Vue: Running a Vue app on a relative path
Last update: 12/6/2019, 4:58:04 PM
A vue app is usually configured to run from the root of a domain e.g. https://acme.com. There might be cases when you are required to run the app from a relative path, say https://acme.com/app-one. Of course we still want to use history.pushState routing because we want good-looking URLs. And despite what the Vue-CLI manual says it can be done! The key is to inform all moving parts of the new path.
Vue-CLI configuration
In the file vue.config.js (create this if you do not have one already) add the following line to module.exports:
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app-one/'For development purposes we still use / here.
index.html
The value of publicPath is available for injection in index.html. Add the following tag to the <head> section:
<base href="<%= BASE_URL %>">Vue Router configuration
Vue router needs to be aware of this path as well.
const router = new VueRouter({
mode: 'history',
base: process.env.NODE_ENV === 'development' ? '/' : '/app-one/',
routes
})NGINX configuration
Finally the webserver needs to play along. Here is a sample of NGINX configuration:
location /app-one {
alias /path-to-the-app-files/;
# Enable history mode for Vue Router
try_files $uri $uri/ /app-one/index.html;
}